<template>
  <!-- 背景图 -->
  <div class="bcpic"></div>
  <!-- 表单元素 -->
  <main>
    <van-tabs
      v-model:active="active"
      @click="onClick"
      line-width="0"
      line-height="0"
    >
      <van-tab title="机票|火车票"
        ><van-tabs @click="onClick" line-width="0" line-height="0">
          <!-- 汽车票查询页 -->
          <van-tab title="汽车票" title-style="22px" class="carlist">
            <div class="search">
              <p class="area">地区</p>
              <p class="dat">日期</p>
              <van-button
                type="primary"
                size="large"
                color="linear-gradient(to right, #ff6034, #ee0a24)"
                >查询</van-button
              >
            </div>
          </van-tab>
          <!-- 机场巴士查询页 -->
          <van-tab title="机场巴士" class="carlist">
            <div class="search">
              <p class="area">地区</p>
              <p class="dat">日期</p>
              <van-button
                type="primary"
                size="large"
                color="linear-gradient(to right, #ff1034, #ee7a24)"
                >查询</van-button
              >
            </div>
          </van-tab>
          <!-- 景区巴士查询页 -->
          <van-tab title="景区巴士" class="carlist">
            <div class="search">
              <p class="area">地区</p>
              <p class="dat">日期</p>
              <van-button
                type="primary"
                size="large"
                color="linear-gradient(to right, #fa7034, #ea5a24)"
                >查询</van-button
              >
            </div>
          </van-tab>
        </van-tabs></van-tab
      >
      <van-tab title="汽车票|船票">
        <van-tabs @click="onClick" line-width="0" line-height="0">
          <!-- 汽车票查询页 -->
          <van-tab title="汽车票" title-style="22px" class="carlist">
            <div class="search">
              <p class="area">地区</p>
              <p class="dat">日期</p>
              <van-button
                type="primary"
                size="large"
                color="linear-gradient(to right, #ff6034, #ee0a24)"
                >查询</van-button
              >
            </div>
          </van-tab>
          <!-- 机场巴士查询页 -->
          <van-tab title="机场巴士" class="carlist">
            <div class="search">
              <p class="area">地区</p>
              <p class="dat">日期</p>
              <van-button
                type="primary"
                size="large"
                color="linear-gradient(to right, #ff1034, #ee7a24)"
                >查询</van-button
              >
            </div>
          </van-tab>
          <!-- 景区巴士查询页 -->
          <van-tab title="景区巴士" class="carlist">
            <div class="search">
              <p class="area">地区</p>
              <p class="dat">日期</p>
              <van-button
                type="primary"
                size="large"
                color="linear-gradient(to right, #fa7034, #ea5a24)"
                >查询</van-button
              >
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </main>
  <!--  -->
  <footer>
    <p class="query">最近查询</p>
    <div><span>机场线路|</span> <span>热门景区</span></div>
  </footer>
  <div class="fanhui" @click="fanhui">
    <van-icon name="arrow-left" />
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const active = ref(1);
    const fanhui = () => {
      router.go(-1);
    };
    return { active, fanhui };
  },
};
</script>
<style lang="less" scoped>
.fanhui {
  position: absolute;
  top: 12px;
  left: 0;
  font-size: 18px;
  color: white;
  display: block;
  width: 20px;
  height: 20px;
  z-index: 5;
}
.bcpic {
  width: 375px;
  height: 138px;
  background: url(http://10.31.165.26:3000/images/banner.png) no-repeat;
  background-size: 100% 100%;
}
main {
  width: 357px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -50px;
  margin-left: 9px;

  .van-tab__pane {
    width: 357px;
    height: 226px;
    .van-tab__text--ellipsis {
      font-size: 15px;
    }
    .van-col {
      font-size: 14px;
      text-align: center;
    }
    .search {
      width: 304px;
      p {
        font-size: 14px;
        line-height: 42px;
        width: 304px;
        border-bottom: 1px solid;
      }
    }
    .carlist {
      display: flex;

      justify-content: center;
      .van-button {
        border-radius: 8px;
      }
    }
  }
}
footer {
  width: 357px;
  margin-top: 9px;
  margin-left: 9px;

  .query {
    font-size: 15px;
    height: 31px;
    text-align: center;
    line-height: 31px;
    border: 1px dashed;
    color: grey;
  }
  div {
    width: 146px;
    margin-left: 115px;
    span {
      font-size: 15px;
    }
  }
}
</style>
